<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el与data的简写</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>country:{{name}}</h2>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false//禁止提示生产提示
    /*el的第一种写法 data的第一种写法 对象式 属性值是对象*/
/*    new Vue({
        el:'#root',
        data:{
            name:"china"
        }
    })*/
    /*el的第二种写法 一般不常用*/
/*    new Vue({

        data:{
            name:"china"
        }
    }).$mount('#root')*/
    /*data第二种写法 函数式 data的属性值是一个函数 返回值是一个对象 适用于组件化的编码形式*/
    new Vue({
        data(){
            return {
                name:'china'
            }
        }
    }).$mount('#root')
</script>
</body>
</html>